<template>
  <drawer
    :model-value="modelValue"
    :title="formData.name"
    size="40%"
    @close="close"
    @open="open"
  >
    <el-form
      :model="formData"
      v-bind="formConfig"
    >
      <el-form-item
        label="姓名"
        prop="name"
      >
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="formData.password"
          type="password"
          show-password
          disabled
        />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item
        v-show="formData.departmentName"
        label="部门"
      >
        <el-input v-model="formData.departmentName" />
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="formData.type">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group
          v-model="formData.sex"
          disabled
        >
          <el-radio-button
            label="男"
            :value="1"
          />
          <el-radio-button
            label="女"
            :value="2"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="头像">
        <el-image
          :src="formData.avatarUrl"
          :preview-src-list="[formData.avatarUrl]"
        />
      </el-form-item>
    </el-form>
  </drawer>
</template>

<script setup>
import { UserType, UserTypeText } from '@/const/user'
import useForm from '@/hooks/useForm'
import Drawer from '@/components/modal/drawer'

const modelValue = defineModel({ type: Boolean, default: false })
const props = defineProps({
  user: {
    type: Object,
    default: () => { },
  },
})

const { formData, formConfig } = useForm(props.user, { labelWidth: 75 })

const options = [
  { label: UserTypeText[UserType.Staff], value: UserType.Staff },
  { label: UserTypeText[UserType.Visitor], value: UserType.Visitor },
  { label: UserTypeText[UserType.Service], value: UserType.Service },
  { label: UserTypeText[UserType.Consumer], value: UserType.Consumer },
  { label: UserTypeText[UserType.Supplier], value: UserType.Supplier },
  { label: UserTypeText[UserType.BlackList], value: UserType.BlackList },
]

function open() {
  formData.value = props.user
}

function close() {
  modelValue.value = false
  formData.value = {}
}
</script>
